// 二级路由---->goods--->list组件
// 商品管理 组件
// goods-add组件
console.log('goods-add组件导入了');
// 导入html、css
import { htmlStr, cssStr } from "./view.js"
// 导入axios
import { axios } from "../../../../utils/ajax.js"

// 组件的js代码
// 获取路由入口元素
let routerView = document.querySelector('.router-view');

function render() {
  // html
  routerView.innerHTML = htmlStr;
  // css
  let styleEle = document.createElement('style');
  styleEle.innerText = cssStr;
  document.head.appendChild(styleEle)
  // 接口请求
  renderTbody()
  // 分类列表
  listGo()
}

// 接口
async function renderTbody() {
  let formEle = routerView.querySelector('form')
  // 标题
  let tits = routerView.querySelector('#title')
  // 大图
  let img_big = routerView.querySelector('#img_big_logo')
  // 小图
  let img_small = routerView.querySelector('#img_small_logo')
  // 原价
  let pri = routerView.querySelector('#price')
  // 折扣
  let sale = routerView.querySelector('#sale_type')
  // 库存
  let goodsNum = routerView.querySelector('#goods_number')
  // 热销
  let hot = routerView.querySelector('#is_hot')
  // 分类
  let cate = routerView.querySelector('option')
  // 描述
  let intro = routerView.querySelector('#introduce')


  formEle.addEventListener('submit', async e => {
    e.preventDefault()

    let title = tits.value,
      img_big_logo = img_big.value,
      img_small_logo = img_small.value,
      price = pri.value,
      sale_type = sale.value,
      goods_number = goodsNum.value,
      is_hot = hot.value,
      category = cate.innerText,
      introduce = intro.value;
    // console.log(category);

    // 配置
    let data = {
      title,
      img_big_logo,
      img_small_logo,
      price,
      sale_type,
      goods_number,
      is_hot,
      category,
      introduce
    }
    // 不为空校验
    for (const key in data) {
      if (!data[key]) return alert('请完整填写表单')
    }
    // 格式校验
    if (!/^[1-9]\d+$/.test(price)) return alert('原价格式错误，请输入数值')
    if (!/^[1-9]\d+$/.test(goods_number)) return alert('商品库存格式错误，请输入数值')
    if (!/^(0|1)$/.test(is_hot)) return alert('热销格式错误，只能输入0或1')
    // if (!/\.(jpg|jpeg|png|gif|webp)$/i.test(img_big_logo)) return alert('大图格式错误，请传入网络图片')
    // if (!/\.(jpg|jpeg|png|gif|webp)$/i.test(img_small_logo)) return alert('小图格式错误，请传入网络图片')

    // 商品标签
    let tit = e.target.dataset.id
    if (tit == 'title') {
      let value = e.target.value;
      title = value
    }
    let { data: { code, message } } = await axios({ url: '/goods/add', method: 'post', data })
    if (code != 1) return alert(`上传失败,${message}`)
    alert('上传成功')
    // console.log(data);
    // console.log(re);
  })



}




// 获取分类列表
async function listGo() {
  // 请求购物车数据，渲染分类
  let { data: { cates: cat } } = await axios({ url: '/goods/cates' })
  routerView.querySelector('#category').innerHTML = cat.reduceRight((prev, item) =>
    prev + `<option  data-id="Cat" value="">${item}</option>`, '<option  data-id="Cat" value="">全部</option>')
}


/*
大图：'https://lmg.jj20.com/up/allimg/4k/s/02/2109250006343S5-0-lp.jpg'
小图： 'https://lmg.jj20.com/up/allimg/4k/s/02/2109250006343S5-0-lp.jpg'
*/





export default render;